<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="stylesheet" href="${APP_PATH }/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="${APP_PATH }/css/font-awesome.min.css">
    <link rel="stylesheet" href="${APP_PATH }/css/theme.css">
    <style>
        #footer {
            padding: 15px 0;
            background: #fff;
            border-top: 1px solid #ddd;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="navbar-wrapper">
    <div class="container">
        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" href="index.html" style="font-size:32px;">尚筹网-创意产品众筹平台</a>
                </div>
                <div id="navbar" class="navbar-collapse collapse" style="float:right;">
                    <jsp:include page="/WEB-INF/jsp/common/memberinfo.jsp"/>
                </div>
            </div>
        </nav>

    </div>
</div>

<div class="container theme-showcase" role="main">
    <div class="page-header">
        <h1>实名认证 - 申请</h1>
    </div>

    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation"><a href="#"><span class="badge">1</span> 基本信息</a></li>
        <li role="presentation" class="active"><a href="#"><span class="badge">2</span> 资质文件上传</a></li>
        <li role="presentation"><a href="#"><span class="badge">3</span> 邮箱确认</a></li>
        <li role="presentation"><a href="#"><span class="badge">4</span> 申请确认</a></li>
    </ul>

    <form id="upLoadCertForm" role="form" style="margin-top:20px;" method="post" enctype="multipart/form-data">
        <c:forEach items="${certList }" var="cert" varStatus="status">
            <div class="form-group">
                    <%--上传资质的名称--%>
                <label for="exampleInputEmail1">${cert.name }</label>
                    <%--上传文件需要用到资质的Id以及会员的Id(表示哪个会员上传的哪些资质)--%>
                <input type="hidden" name="certimgs[${status.index}].certid" value="${cert.id}">
                    <%--上传资质的内容(涉及到上传多个文件)--%>
                <input type="file" name="certimgs[${status.index}].multiPartFile" class="form-control">
                <br>
                    <%--默认不加载任何图片(上传图片可以进行预览)--%>
                    <%--<img src="${APP_PATH }/img/pic.jpg">--%>
                <img src="" style="display: none"> <%--不显示--%>
            </div>
        </c:forEach>
        <button type="button" onclick="window.location.href='${APP_PATH}/member/basicInfo.htm'" class="btn btn-default">
            上一步
        </button>
        <button id="nextBtn" type="button" class="btn btn-success">下一步</button>
    </form>
    <hr>
</div> <!-- /container -->
<div class="container" style="margin-top:20px;">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div id="footer">
                <div class="footerNav">
                    <a rel="nofollow" href="http://www.atguigu.com">关于我们</a> | <a rel="nofollow"
                                                                                  href="http://www.atguigu.com">服务条款</a>
                    | <a rel="nofollow" href="http://www.atguigu.com">免责声明</a> | <a rel="nofollow"
                                                                                    href="http://www.atguigu.com">网站地图</a>
                    | <a rel="nofollow" href="http://www.atguigu.com">联系我们</a>
                </div>
                <div class="copyRight">
                    Copyright ? 2017-2017 atguigu.com 版权所有
                </div>
            </div>

        </div>
    </div>
</div>
<script src="${APP_PATH }/jquery/jquery-2.1.1.min.js"></script>
<script src="${APP_PATH }/bootstrap/js/bootstrap.min.js"></script>
<script src="${APP_PATH }/script/docs.min.js"></script>
<script src="${APP_PATH}/jquery/layer/layer.js"></script>
<script src="${APP_PATH }/jquery/jquery-form/jquery-form.min.js"></script>
<script>
    $('#myTab a').click(function (event) {
        event.preventDefault();
        $(this).tab('show');
    });

    // 上传文件做回显的操作
    $(":file").change(function (event) {
        // 如果文件域发生改变触发事件(事件目标节点)
        var files = event.target.files;
        var file;
        // 判断文件数量是否大于0(大于0说明有文件存在)
        if (files && files.length > 0) {
            file = files[0];
            // Dom对象(URL 属性可返回当前文档的 URL)
            var URL = window.URL || window.webkitURL;
            // 本地图片路径
            var imgURL = URL.createObjectURL(file);
            // $(this)选择当前节点, next()表示选择当前节点的相邻节点的下一各节点
            // 找到每个段落的后面紧邻的同辈元素
            var imgObj = $(this).next().next(); //获取同辈紧邻的下一个元素
            // console.log(imgObj); // 在浏览器的控制台打印消息
            // 将图片的路径填充到src当中
            imgObj.attr("src", imgURL);
            // 显示图片
            imgObj.show();
        }
    });

    // 上传多文件
    $("#nextBtn").click(function () {
        var loadingIndex = -1;
        var options = {
            url: "${APP_PATH}/member/uploadCertFile.do",
            beforeSubmit: function () {
                loadingIndex = layer.msg("资质上传中, 请稍后......", {icon: 16});
                return true;
            },
            success: function (result) {
                layer.close(loadingIndex);
                if (result.success) {
                    layer.msg("资质文件上传成功", {time: 1000, icon: 6}, function () {
                        window.location.href = "${APP_PATH}/member/apply.htm";
                    });
                } else {
                    layer.msg("资质文件上传失败", {time: 1000, icon: 5, shift: 6});
                }
            },
            error: function () {
                layer.msg("操作失败!", {time: 1000, icon: 5, shift: 6});
            }
        };
        $("#upLoadCertForm").ajaxSubmit(options);
    });
</script>
</body>
</html>